<template>
  <!-- 商品分类 -->
  <div>
    <!--      面包屑导航栏-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片，数据区域 -->
    <el-card>
      <el-row>
        <el-col>
          <!-- 绑定添加事件 -->
          <el-button type="primary" @click="showAddDialog">添加分类</el-button>
        </el-col>
      </el-row>

      <!-- 表格区域 :使用数状插件，先在main.js中注册引用,columns属性：绑定这列的数据，selection-type：去除边上复选框,expand-type:展开行-->
      <!-- show-index:是否显示数据索引,border：边框 -->
      <tree-table
        :data="cateList"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        show-index
        index-text="索引"
        border
      >
        <!-- 使用自定义的模板，solt属性值与自定义模板名称一致 -->
        <template slot="isok" slot-scope="scope">
          <i class="el-icon-success" v-if="scope.row.sex === 'male'"></i>
          <i class="el-icon-error" v-else></i>
        </template>
        <!-- 使用自定义的模板，solt属性值与自定义模板名称一致 -->
        <template solt="order" slot-scope="scope">
          <el-tag v-if="scope.row.sort === 1">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.sort === 2">二级</el-tag>
          <el-tag type="warning" v-else>三级</el-tag>
        </template>
        <!-- 操作：删除和编辑按钮 -->
        <template solt="opt" >
          <el-button type="primary" icon="el-icon-edit">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete">删除</el-button>
        </template>
      </tree-table>

      <!-- 分页区域 -->

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 3, 400]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 添加分类对话框，
    close：监听关闭事件，重置表单数据，防止下次再次打开数据重叠 -->
    <el-dialog
      title="添加分类"
      :visible.sync="addCatedialogVisible"
      width="50%"
      @close="addCateclosed"
    >
      <!-- 添加分类表格区域 -->
      <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="类别名称" prop="cat_name">
          <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>

         <el-form-item label="父级分类" >
           <!-- 使用级联选择器，默认点击展开 ,options用来指定数据源-->
           <!-- :props属性：用来指定数据对象 -->
           <!-- v-model:双向绑定数据，获取选中的值，此处把选中的id值保存,必须为一个数组 -->
           <!-- @change事件：只要选中项发生变化，就会触发此事件 -->
           <!-- change-on-select属性:设置可以选择任意一级，不设置只能选二级菜单 -->
           <el-cascader
            v-model="selectdeKeys"
            :options="parentList"
            @change="parentCateChange"
            :props="cascaderProps"
            clearable
            change-on-select>
          </el-cascader>

        </el-form-item>
       </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addCatedialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </span>

     
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //接口请求和返回信息
      queryInfo: {
        pagesize: 5,
        type: 3,
        pagenum: 1,
      },
      //商品分类数据列表,此处为模拟数据
      cateList: [
        {
          name: "Jack",
          sex: "male",
          sort: "1",
          children: [
            {
              name: "Ashley",
              sex: "female",
              sort: 2,
              children: [
                {
                  name: "Ashley",
                  sex: "female",
                  sort: 3,
                },
              ],
            },
          ],
        },
      ],

      total: 10,
      // 为tree-table指定列的定义,prop:属性名称,label：这列的标题
      columns: [
        {
          label: "分类名称",
          prop: "name",
        },
        //自定义模板，取名为isok
        {
          label: "是否有效",
          //表示将当前列定义为模板列
          type: "template",
          //表示当前列使用模板名称
          template: "isok",
        },
        //自定义模板，取名为order
        {
          label: "排序",
          type: "template",
          template: "order",
        },
        //自定义模板
        {
          label: "操作",
          //表示将当前列定义为模板列
          type: "template",
          //表示当前列使用模板名称
          template: "opt",
        },
      ],
      // 控制类别添加对话框显示隐藏
      addCatedialogVisible : false,
      //添加分类表单数据对象,不选的话默认为一级，pid为0
      addCateForm : {
        //分类名称
        cat_name:'',
        // 分类的父级id
        cat_pid : 0,
        // 分类级别
        cat_level : 0},

      //添加分类表单的验证规则
      addCateFormRules:{
        cat_name : [
          {required:true,message:'请输入类别名称',trigger:'blur'}
        ],

      },
      // 父级分类列表
      parentList : [
        {id : 1,cat_name:'分类1',cat_pid:0,cat_level:0,children:[{id : 11,cat_name:'分类11',cat_pid:0,cat_level:1}]},
        {id : 2,cat_name:'分类2',cat_pid:0,cat_level:1,children:[{id : 12,cat_name:'分类12',cat_pid:0,cat_level:1}]},
        {id : 3,cat_name:'分类3',cat_pid:0,cat_level:2,children:[{id : 13,cat_name:'分类13',cat_pid:0,cat_level:1}]}
        ],
        //指定级联选择器的配置对象，对应字段名称
        cascaderProps : {
          value : 'id',//选中的值
          label : 'cat_name',//标题名称
          children : 'children'//子级名称
        },
        //选中的父类id数组
        selectdeKeys : [],

    };
  },

  created() {
    this.getCateList();
  },

  methods: {
    //   获取分类列表，请求数据对象用params
    async getCateList() {
      //   const {data : res}  = await this.$http.get("category",{params:this.queryInfo});
      //   if(res.stauts !==200){return this.$message.error('获取类别失败')}
      //获取数据列表，赋值
      //   this.cateList = res.data.result
      //   this.total = res.total
    },
    //每个数据条数改变
    handleSizeChange(size) {
      this.queryInfo.pagesize = size;
      this.getCateList();
    },
    //   监听页码改变，得到当前页码
    handleCurrentChange(page) {
      this.pagenum = page;
      this.getCateList();
    },
    //添加分类事件
    showAddDialog(){
      //先获取父级分类的列表，调用函数
      this.getParentCateList();

      
      //让对话框显示
      this.addCatedialogVisible = true;
    },

    //获取父级分类的列表
    async getParentCateList(){
      const {data : res} = await this.$http.get('category',{params:{type : 2 }})
      // if(res.status !==200){return this.$message.error('请求父级类别失败')}
      //获取到数据，赋值
      // this.parentList = res.data;
    },
    // 级联选择器选项发生变化触发此函数
    parentCateChange(){
      //打印选中的父级id
      // console.log(this.selectdeKeys)
      // 如果selectdeKeys的长度大于0，说明选中了父级分类
      if(this.selectdeKeys.length > 0){
        // 把父级id赋值给表单，
        //因为类别可能有多级，我们只需要最后一级，所以截取数组中最后一个值
        this.addCateForm.cat_pid = this.selectdeKeys[this.selectdeKeys.length-1];
        // 类别的级别和选中的数组的长度是一样的，如：1,3
        this.addCateForm.cat_level = this.selectdeKeys.length
        return 
      }else{
        // 如果没有选择，即为顶级分类，pid和level重置为0
        //父级id
        this.addCateForm.cat_pid = 0
        // 级别
        this.addCateForm.cat_level = 0
      }
      
    },
    //点击确定按钮添加分类
    addCate(){
      //验证数据
      this.$refs.addCateFormRef.validate(async valid=>{
        //验证不通过直接返回
        if(!valid) return
        //验证通过，请求接口，将数据返回到后端
        const {data:res} = await this.$http.post('category',this.addCateForm);
        if(res.status !==201){return this.$message.error('添加分类失败')}
        //验证通过
        this.$message.success('添加分类成功');
        //重新请求数据
        this.getCateList();
        //关闭内容对话框
        this.addCatedialogVisible = false
      })
    },
    //监听对话框的关闭事件，重置对话框的值
    addCateclosed(){
      //重置表单数据
      this.$refs.addCateFormRef.resetFields()
      //重置保存的父级id
      this.selectdeKeys = []
      //重置父级id
      this.addCateForm.cat_pid = 0
      //重置类别级别
      this.addCateForm.cat_level = 0
    }

  },
};
</script>

<style  scoped>
  .el-cascader{
    width: 100%;
  }
  .zk-table{
    margin-top:15px;
  }
</style>